import React, { useState, useEffect } from 'react'
import { backgroundObj, navigateTo } from '@/utils/utils'
import { View, Swiper, SwiperItem, Button, Input, Text } from '@tarojs/components';
import Tabbar from '@/components/Tabbar'
import Tabs from '@/components/Tabs'
import Image from '@/components/FormCondition/Image'
import Taro, { usePageScroll, TarBarList, getCurrentInstance, useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro'
import { fetchUserHelpQaById, fetchUserHelpQaAnswer, fakeCollectOrUnCollectHelpQaAnswer, fakeRemoveAnswer, fakLikeOrCancelLikeHelpQaAnswer, fakeCollectOrUnCollectHelpQa } from '@/server/shop'
import Drawermodal from '@/components/Modal'
import Router from '@/utils/router'
import './index.scss'

const MutualDetail = (props) => {
    const { id } = getCurrentInstance().router.params
    const [data, setData] = useState({})
    const [list, setList] = useState([])
    const [scrollY, setScroll] = useState(0)
    const [total, setTotal] = useState(0)
    const [visible, setVisible] = useState([])
    const [page, setPage] = useState({
        page: 1,
        limit: 9999,
        searchType: 'all'
    })

    const fetchData = () => {
        fetchUserHelpQaAnswer({ ...page, postId: id }).then(val => {
            const { postAnswerList, total } = val
            setList(postAnswerList)
            setTotal(total)
        }).finally(() => {
            Taro.stopPullDownRefresh();
        });
    }
    const fakLikeOrCancelLike = (item) => {
        const { id, likeFlag, postId, likeAmount } = item
        fakLikeOrCancelLikeHelpQaAnswer({
            postId: postId,
            answerId: id
        }).then(val => {
            setList(list.map(val => {
                if (val.id === id) {
                    return {
                        ...val,
                        likeFlag: likeFlag === '1' ? '0' : '1',
                        likeAmount: likeFlag === '1' ? likeAmount - 1 : likeAmount + 1
                    }
                }
                return val
            }))
        })
    }
    const fakeCollectOrUnCollectHelp = (item) => {
        const { id, collectFlag, postId, collectAmount } = item
        fakeCollectOrUnCollectHelpQaAnswer({
            postId: postId,
            answerId: id,
        }).then(val => {
            setList(list.map(val => {
                if (val.id === id) {
                    return {
                        ...val,
                        collectFlag: collectFlag === '1' ? '0' : '1',
                        collectAmount: collectFlag === '1' ? collectAmount - 1 : collectAmount + 1
                    }
                }
                return val
            }))
        })
    }
    const fakeCollect = () => {
        fakeCollectOrUnCollectHelpQa({
            postId: id
        }).then(val => {
            setData({
                ...data,
                collectFlag: data.collectFlag === '1' ? '0' : '1'
            })
        })
    }
    usePullDownRefresh(() => {
        setPage(() => {
            setList([])
            return {
                ...page,
                page: 1,

            }
        })
    })
    // useReachBottom(() => {
    //     setPage({
    //         ...page,
    //         page: page.page + 1
    //     })
    // })
    useDidShow(() => {
        fetchDetail()
        fetchData()

    })
    usePageScroll((e) => {
        setScroll(e)
    })
    const fetchDetail = () => {
        fetchUserHelpQaById({
            id
        }).then((val = {}) => {
            const { post } = val
            setData(post)
        })
    }
    const { content = '', viewAmount, answerAmount, createTime, username, collectAmount, userProfile } = data
    const { images = '', text } = content.length > 0 ? JSON.parse(content) : {}
    const imageList = images.split(',').filter(val => {
        return val
    })
    console.log(list, 'list')
    return <View className='MutualDetail_box'>
        <View className='MutualDetail_user_box'>
            <View className='MutualDetail_user_info'>
                <View className='MutualDetail_user'>
                    <View className='MutualDetail_user_left'>
                        <View style={backgroundObj(userProfile)} className='MutualDetail_user_profile'></View>
                        <View className='MutualDetail_user_name'>
                            {username}
                        </View>
                    </View>
                    <View className='MutualDetail_user_right'>
                        {createTime}
                    </View>
                </View>
                <View className='MutualDetail_title_box'>
                    <Text className='MutualDetail_title_icon'></Text>
                    {text}
                </View>
                <View className="Collect_list_showImage">
                    {imageList.map(val => {
                        return <View className="Collect_list_image">
                            <Image src={val}></Image>
                        </View>
                    })}
                </View>
                <View className='MutualDetail_handle_box'>
                    <View className='MutualDetail_handle_left'>
                        <View className='MutualComponents_bottom_left'>
                            <View>{answerAmount}回答</View>
                            <View className='MutualComponents_bottom_radio'></View>
                            <View>{collectAmount}收藏</View>
                            <View className='MutualComponents_bottom_radio'></View>
                            <View>{viewAmount}浏览</View>
                        </View>
                    </View>

                    <View className='MutualDetail_handle_right'>
                        <View onClick={() => { fakeCollect() }} className={data.collectFlag === '1' ? 'MutualDetail_handle_rightIcon2' : 'MutualDetail_handle_rightIcon1'}></View>
                        <View className='MutualDetail_handle_rightIcon3'></View>
                    </View>
                </View>
            </View>
        </View>
        <View className='MutualDetail_user_content'>
            <View className='MutualDetail_content_box'>
                <View className='MutualDetail_content_title'>共{total}个回答</View>
                {list.map(item => {
                    const { content, likeFlag, collectFlag, viewAmount, operationFlag, likeAmount, commentAmount, createTime, username, collectAmount, userProfile } = item
                    const contentData = content ? JSON.parse(content) : {}
                    const { images = '', text } = contentData
                    const imageList = images.split(',').filter(val => {
                        return val
                    })
                    return <View onClick={(e) => {
                        e.stopPropagation()
                        Router('MutualAll', {
                            args: {
                                postId: id,
                                postAnswerId: item.id,
                            }
                        })
                    }} className='MutualDetail_card_box'>
                        <View className='MutualDetail_card_userBox'>
                            <View className='MutualDetail_card_userLeft'>
                                <View className='MutualDetail_card_profile' style={backgroundObj(userProfile)}></View>
                                <View className='MutualDetail_card_username font_hide'>
                                    {username}
                                </View>
                            </View>
                            {operationFlag === '1' && <View className='MutualDetail_card_userRight'>
                                <View onClick={(e) => {
                                    e.stopPropagation()
                                    setVisible({ show: true, detail: item })
                                }} className='MutualDetail_card_userRightButton'>
                                    删除
                                </View>
                                <View onClick={(e) => {
                                    e.stopPropagation()
                                    Router('MutualAsk', {
                                        args: {
                                            id: item.id,
                                            type: 'edit',
                                            title: text,
                                            text: contentData.text,
                                            defaultList: JSON.stringify(imageList)
                                        }
                                    })
                                }} className='MutualDetail_card_userRightButton'>
                                    编辑
                                </View>
                            </View>}
                        </View>
                        <View className='MutualDetail_card_desc'>
                            {text}
                        </View>
                        <View className="Collect_list_showImage">
                            {imageList.map(val => {
                                return <View className="Collect_list_image">
                                    <Image src={val}></Image>
                                </View>
                            })}
                        </View>
                        <View className='MutualDetail_card_bottom'>
                            <View className='MutualDetail_card_bottomLeft'>
                                回答于 {createTime}
                            </View>
                            <View className='MutualDetail_card_bottomRight'>
                                <View onClick={(e) => {
                                    e.stopPropagation()
                                    fakLikeOrCancelLike(item)
                                }} className='MutualDetail_card_iconBox'>
                                    <View className={likeFlag === '1' ? 'MutualDetail_card_icon MutualDetail_card_iconStyle2' : 'MutualDetail_card_icon MutualDetail_card_iconStyle1'}></View>
                                    <View className=''>
                                        {item.likeAmount}
                                    </View>
                                </View>
                                <View className='MutualDetail_card_iconBox'>
                                    <View className='MutualDetail_card_icon MutualDetail_card_iconStyle3'></View>
                                    <View className=''>
                                        {commentAmount}
                                    </View>
                                </View>
                                <View onClick={(e) => {
                                    e.stopPropagation()
                                    fakeCollectOrUnCollectHelp(item)
                                }} className='MutualDetail_card_iconBox'>
                                    <View className={collectFlag === '0' ? 'MutualDetail_card_icon MutualDetail_card_iconStyle4' : 'MutualDetail_card_icon MutualDetail_card_iconStyle5'}></View>
                                    <View className=''>
                                        {collectAmount}
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>
                })}
            </View>
            {list.length === 0 ? <>
                <View className='MutualDetail_user_emptyHeight'></View>
                <View className='MutualDetail_user_empty'></View>
            </> : ''}

            <View onClick={() => {
                Router('MutualAsk', {
                    args: {
                        id: id,
                        type: 'install',
                        title: text
                    }
                })
            }} className='MutualDetail_user_submit'>
                我来回答
            </View>
        </View>
        <Drawermodal onOK={() => {
            const { detail = {} } = visible
            const { id } = detail
            fakeRemoveAnswer({ id }).then(val => {
                setList(list.filter(e => {
                    return e.id !== id
                }))
                setVisible(false)
            })
        }} onFall={() => { setVisible(false) }} title='删除提示' desc='确定删除你宝贵的答疑内容吗？' show={visible.show} visible={visible} onClose={() => { setVisible(false) }}></Drawermodal>
    </View >

}
export default MutualDetail